<template>
  <div id="" class="serviceItem">
    <img :src="imgUrlLink(skillItem.ballUser.headPortrait)" alt="" class="headImg">
    <div class="serviceBox">
      <div class="justify-content">
        <h3>{{skillItem.ballUser.nickName}}</h3>
        <span><em class="price">{{skillItem.cost}}</em>/小时</span>
      </div>
      <div>
        <img :src="imgUrlLink(skillItem.classify.minIcon)" alt="" width="15">
        &nbsp; {{skillItem.classify.classifyName}} <span class="grade">{{sportsLev()}}</span>
      </div>
      <p>{{skillItem.cycle}}{{skillItem.timeSlot}}--{{skillItem.duration}}小时</p>
      <div class="justify-content">
        <p class="addr">
          <img src="@/assets/adress1.png" alt="" width="15">
          {{skillItem.activeAddr || skillItem.agreedAddr}}
        </p>
        {{skillItem.distance}}m
      </div>
    </div>
  </div>
</template>
<script>
import {sportsIcon} from '@/utils/sportsIcon.js';
export default {
  name: "",
  props: ['skillItem'],
  data: () => ({
    badminton:'',
  }),
  methods: {
    // 图片地址拼接
    imgUrlLink(imgurl) {
      return this.$imgUrlLink(imgurl);
    },
    sportsLev() {
      switch (this.skillItem.sportsLev) {
        case 0:
          return '初级'
          break;
        case 1:
          return '中级'
          break;
        case 2:
          return '高级'
          break;
        default:

      }
    },
  },
  mounted() {
    //do something after mounting vue instance
    console.log(this.skillItem);
  }
}
</script>
<style lang="scss" scoped>
.serviceItem{
  @include flex;
  background: white;
  padding: 10px;
  margin-bottom: 10px;
  .headImg{
    width: 80px;height: 80px;
    border-radius: 100%;
  }
  .serviceBox{
    margin-left: 10px;
    @include flexcell;
    color: #6f6f6f;
    h3{
      color: #333333;
      font-size: 1rem;
    }
    .price{
      color: $blueColor;
      font-size: 20px;
    }
    .grade{
      background: $blueColor;
      color: white;
      padding: 2px 4px;
      border-radius: 4px;
      margin-left: 10px;
      font-size: 12px;
    }
    .addr{
      width: 80%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

</style>
